今天內容

• 變數運算
  • a++ 和 ++a執行順序。
  • 需注意的部分：型別不同的相+ 與 浮點數誤差。
• 物件型別
  • arrary、object (關於function，我們之後會專門做一集視頻跟大家講解。)
  • ==和===差異。
  • 比較物件的址和值

筆記

• 變數運算：a++ 和 ++a 執行順序。

  var a = 0
  a = a + 5
  console.log(a) //5
  

  a = a + 5 可以簡寫成 a += 5。
  只有+1的話，可以再寫成++ (-1同理--)，之後會很常使用到。

  MDN Arithmetic operators
  MDN Assignment operators

  特別指出這個要說的是放前面跟放後面執行順序的差異：

  var a = 0
  console.log(a++ && 30) //0
  /* 執行順序
       1. 宣告 a = 0
       2. a && 30 -> a=0
       3. a+=1 -> a=1 
     第2行已經跑完並印出0，就沒有印出第3行(但還是有跑)。
     想知道的話可以再加下面一行來確認整個跑完的a是多少 */
  console.log(a) //1
  

  var a = 0
  console.log(++a && 30) //30
  /* 執行順序
       1. 宣告 a = 0
       2. 先跑 a+=1 -> a=1
       3. 1 && 30  -> 兩個都是true回傳後面 30 */
  

  額外小筆記：學長說這樣寫已經兩層了，如果外面再放 if...else 做判斷時可讀性會變很差，所以他不建議我這樣寫。

• 變數運算需注意的部分

  • 型別不同的相+

    var a = "10"
    var b = 20
    var c = 10
    console.log(a+b) //1020
    console.log(b+c) //30
    // 當兩個資料型態不同時，用+會變成連接，並不會相加。
    

  • 浮點數誤差

    var a = 0.1 + 0.2
    console.log(a)  //0.30000000000000004 -> 不會等於0.3
    

    點開第三天說的辣個很佛心的免費影片[CS101]初心者的計概與 coding 火球術：可以再看一次電腦怎麼儲存數字的(07:00處快速觀看小數的部分)。

• 物件型別：array、object

  • 陣列(array)：[]儲存大量且重覆性的資料，通常存性質相似的東西，例如：學生的分數。

    var score = [65,87,74,91,62,94,88,79,69,70]
    console.log(score)         //[65, 87, 74, 91, 62, 94, 88, 79, 69, 70]
    console.log(score.length)  //10
    console.log(score[score.length - 1])  //70
    
    score.push(80)
    console.log(score)  //[65, 87, 74, 91, 62, 94, 88, 79, 69, 70, 80]
    

    第一筆資料位置(index)從0開始，看長度多少用length，取最後一個值要-1，加東西進去使用push。

  • 物件(object)：{}，key:valueaka 物件屬性(property)，value可以放入任何東西。

    var peter = {
       name:"peter",
       score:100,
       address:"taipei city",
       phone:"0987654321"
    }
    console.log(peter)
    

  • 物件跟陣列做結合。

    

    var students = []    //先宣告一個空陣列
    var peter = {
       name:"peter",
       score:100,
       address:"taipei city",
       phone:"0999888777"
    }
    students.push(peter)      //把peter這個物件放到陣列裡面去
    console.log(students[0])  //會得到peter{}物件裡所有的屬性(太長沒列出)
    console.log(students[0].score)   //100 -> 使用.來取得物件內的屬性
    console.log(peter["score"])   //100 -> 使用[]來取得，例如再宣告一個變數key，可以加入變數更靈活來運用。
    var chemical = "score"
    console.log(peter[chemical]) //100 -> 這邊放的是變數名去找到score這個屬性
    

  • 物件內的陣列 以及 物件內的物件：(四十四隻石獅子) 上面提到value可以放入任何東西，當然也包含object和array，還有function(之後再講)。

    var peter = {
       name:"peter",
       scores:[65,87,74],       //使用陣列來存放多筆分數
       address:"taipei city",
       phone:"0999888777",
       parents: {               //加入父母這個物件
          name:"may",
          phone:"0966555444"
       }
    }
    console.log(peter.scores) //[65, 87, 74]
    console.log(peter.parents.name) //may -> 一直.下去就能取得資料
    console.log(peter["parents"]["name"]) //may ->用陣列方式一樣可取得
    

• ==和===差異：3個等於會比2個等於多判斷一個型態。

  console.log (10 == "10")  //true
  console.log (10 === "10")  //false
  

  由於JavaScript太 貼 (雞) 心 (婆)，在==的比較下，幫你把第一個的10轉成字串來讓他們兩個true，但第二個===就沒有這麼做，直接告訴你false：我們不一樣！
  除非知道自己在幹嘛，盡量不要使用== (除非你想debug) ，一個好建議就是永遠都使用===。

• 比較物件的址和值

  console.log([] === [])        //false
  console.log([1] === [1])      //false
  console.log({} === {})        //false
  console.log({a:1} === {a:1})  //false
  

  為什麼上面都是false？說好的true呢？ (誰跟你說好的？誰～？)
  在物件和陣列上存資料時，要把它想成這個物件(或陣列)整個是被存在電腦的記憶體位置裡，但我們不會知道位置在哪裡，像這樣：
  
  來做一個比較看看：

  var student1 = {
      name:"peter"
  }
  
  var student2 = {
      name:"peter"
  }
  console.log(student1 === student2)   //false
  console.log(student1.name === student2.name) //true
  

  
  所以箱子(student1和student2)比的是址(位置)，但箱子裡的name:"peter"比的是值 (圖片沒有放得很進去，但你們就當作它在裡面吧) 。就像是我們的口袋都是一樣的"媽媽雜摳"，但你的口袋不等於我的口袋。

  引用於【 0 陷阱！0 誤解！8 天重新認識 JavaScript！】作者 Kuro Hsu 說的：假設我口袋裡有十塊錢，你口袋裡也有十塊錢。那麼在正常情況下，我們各自的十塊錢可以買到的東西應該是一樣多的對吧？這個時候，我可以說我們各自的十塊錢是「等值」的。

  

今天終於把課程的前半段都講完了，篇幅有點長。
每天不是在寫稿就是在要被催稿的路上(壓力好大)，想到要用畫圖的方式來說明就覺得很難畫 (畫圖心好累) ，所以想來跟大家分享一個我自己覺得好用的工具 excalidraw 打開網頁就可以直接畫了。我自己蠻喜歡它的手繪風格，目前有用到了以下這些功能：

1. 內建資料庫(有些圖都幫你畫好了，直接選用改色)。
2. 可以選取單一物件匯出，也可以匯入自己的圖片(加上畫圖的物件有支援圖層)。
3. 匯出可以用網址，直接貼到HackMD(不用存到電腦再匯入)，貼到鐵人賽格式一樣讀得到(不用再匯入)。
4. 能選取兩個圖去對齊置中 (對有強迫症的我很受用) 。

其他好用的功能就讓大家去試試看吧，希望每個真・鐵人都能省下畫圖的時間來趕稿啊~GOGOGO!!!

參考資料

• MDN：Expressions and operators
• 梗圖倉庫
• 重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」？
• excalidraw